// # 登录对话框-显示
var loginBtn=document.querySelector('header .member>div')
loginBtn.onclick=function(){
    var loginDialog=document.querySelector('section.login')
    loginDialog.style.visibility='visible'
}

// # 登录对话框-隐藏
var loginCloseBtn=document.querySelector('section.login i.icon-close')
loginCloseBtn.onclick=function(){
    var loginDialog=document.querySelector('section.login')
    loginDialog.style.visibility='hidden'
}

// # 登录对话框-蓝色区域拖拽
var loginBlueBox=document.querySelector('section.login .menu')
loginBlueBox.onmousedown=function(evt){
    var oldE=evt||window.event
    document.onmousemove=function(evt){
        var e=evt||window.event
        var left=e.clientX-oldE.offsetX
        var top=e.clientY-oldE.offsetY
        if(left<0) left=0
        if(top<0) top=0
        var loginDialog=document.querySelector('section.login .item')
        var maxLeft=(window.innerWidth||document.documentElement.clientWidth)-loginDialog.offsetWidth
        var maxTop=(window.innerHeight||document.documentElement.clientHeight)-loginDialog.offsetHeight
        if(left>maxLeft) left=maxLeft
        if(top>maxTop) top=maxTop
        loginDialog.style.position='absolute'
        loginDialog.style.left=left+'px'
        loginDialog.style.top=top+'px'
    }
    document.onmouseup=function(){
        document.onmousemove=null
    }
}


// # 登录倒计时（留心：重复点击BUG  disabled属性
var num=5
var loginCaptchaBtn=document.querySelector('section.login .captcha')
loginCaptchaBtn.onclick = function() {
    var captchaObj=document.querySelector('section.captcha')
    captchaObj.style.visibility='visible'
    document.querySelector('section.captcha i.icon-close').onclick=function(){
        captchaObj.style.visibility='hidden'
    }
    var dragBtn=document.querySelector('section.captcha .drag .btn')
    dragBtn.onmousedown=function(){
    // 4.1 事件处理函数中 - 给【网页】绑定【鼠标移动】事件 -> 目的：球球、卡片同步移动
        document.onmousemove=function(evt){
            var e=evt||window.event
            var left=e.clientX-520-dragBtn.offsetWidth/2
            dragBtn.style.left=left+'px'
            document.querySelector('section.captcha .check img:nth-of-type(2)').style.left=left+'px'
        }
        // 4.2 事件处理函数中 - 给【网页】绑定【鼠标松开】事件 -> 取消网页移动；判断是否拖拽正确
        document.onmouseup=function(){
            document.onmousemove=null
            var value=parseInt(dragBtn.style.left)
            console.log('鼠标松开打印其结果：',value)
            if(value>=260&&value<=265){
                loginCaptchaBtn.innerText=num+'秒后重发'
                loginCaptchaBtn.disabled=true
                t=setInterval(function(){
                    if(num<=1){
                        clearInterval(t)
                        loginCaptchaBtn.innerText='重新发送'
                        num=5
                        loginCaptchaBtn.disabled=false
                        return
                    }
                    num--
                    loginCaptchaBtn.innerText=num+'秒后重发'
                },1000) 
                document.querySelector('section.captcha').style.visibility='hidden'
            }
            dragBtn.style.left = '0px'
            document.querySelector('section.captcha .check img:nth-of-type(2)').style.left = '0px'
        }
    }
}

// # 登录表单验证
var loginSubmitBtn=document.querySelector('section.login .submit')
loginSubmitBtn.onclick=function(){
    var isOk=0
    var mobileObj=document.querySelector('.mobile')
    if(mobileObj.value==''||mobileObj.value.length!=11||!Number(mobileObj.value)){
        document.querySelector('section.login .form>p:nth-of-type(3)').innerText='手机格式有误📱'
    }else{
        isOk++
        document.querySelector('section.login .form>p:nth-of-type(3)').innerText=''
    }
    var passwordObj=document.querySelector('.password')
    if(passwordObj.value==''||passwordObj.value.length!=4||!Number(passwordObj.value)){
        document.querySelector('section.login .form>p:nth-of-type(4)').innerText='验证码只能是4位村数字🔢'
    }else{
        isOk++
        document.querySelector('section.login .form>p:nth-of-type(4)').innerText=''
    }
    if(isOk==2){
        alert('登陆成功')
    }
}